<template>
  <div class="map-main">
    <el-amap class="flight-record-map"
             vid="recordmap"
             ref="recordmap"
             :amapManager="amapManager"
             :mapStyle="mapStyle"
             :plugin="maps.plugin"
             :zoomEnable="maps.enable"
             :dragEnable="maps.enable"
             :zoom="maps.zoom"
             :center="maps.center"
             :events="maps.events">
      <div v-if="rateMarkers.length > 0">
        <el-amap-marker v-for="(item, index) in rateMarkers"
                        :key="index"
                        :position="item.pos">
          <div class="marker-item"
               :style="`width:${item.wh}px;height:${item.wh}px;border-radius:${item.wh}px;`">
          </div>
        </el-amap-marker>
      </div>
    </el-amap>
  </div>
</template>

<script>
import cityData from "../../common/json/city";
import { AMapManager } from 'vue-amap';
let amapManager = new AMapManager(); // 新建生成地图画布
const PLUGIN = ['AMap.Scale', 'AMap.ToolBar'];
export default {
  data () {
    return {
      AMAP: null,
      amapManager,
      mapStyle: "amap://styles/darkblue", // 自定义样式（极夜蓝）
      maps: {
        plugin: PLUGIN,
        enable: true,
        enableclick: true,
        markevent: "click",
        zoom: 4,
        center: [98.280504, 35.04749],
        events: {
          init: (o) => {
            // if (this.emptyVisible || this.accessVisible) return false;
            this.AMAP = this.$refs.recordmap.$$getInstance();
          },
          complete: () => {
            // this.setFitView();
          }
        }
      },
      rateMarkers: [], // 飞行地点频率集合
      province: [
        {
          "province": "新疆维吾尔自治区",
          "number": "12"
        }, {
          "province": "西藏自治区",
          "number": "12"
        }, {
          "province": "江苏省",
          "number": "6"
        }, {
          "province": "甘肃省",
          "number": "9"
        }, {
          "province": "河北省",
          "number": "5"
        }, {
          "province": "河南省",
          "number": "8"
        }, {
          "province": "北京市",
          "number": "2"
        }, {
          "province": "浙江省",
          "number": "7"
        }
      ], // 飞行地点频率集合
    }
  },
  created () {
    this.getSortiesDataBySn()
  },
  methods: {
    getSortiesDataBySn () {
      setTimeout(() => {
        this.renderFlyRateInMap(this.province);
      }, 500)
    },
    renderFlyRateInMap (arr) {
      for (let i = 0; i < arr.length; i++) {
        let temp = [];
        cityData.forEach(element => {
          if (arr[i].province !== "" && arr[i].province.indexOf(element.name) !== -1) {
            temp.pos = [element.log * 1, element.lat * 1];
            temp.wh = this.setCircleDiam(arr[i].number);
            this.rateMarkers.push(temp);
          }
        });
      }
    },
    setCircleDiam (num) {
      // 频率 1-2 | 3-5 | 6-10 | 11-50 | 50以上
      // 直径  10 |  15 |  20  |   30  |   40
      let n = num * 1;
      let diam = 0;
      if (n > 2 && n < 6) {
        diam = 15;
      } else if (n >= 6 && n < 11) {
        diam = 20;
      } else if (n >= 11 && n < 50) {
        diam = 30;
      } else if (n >= 50) {
        diam = 40;
      } else {
        diam = 10;
      }
      return diam;
    },
  }
}
</script>

<style lang="less" scoped>
.map-main {
  height: 100%;
  .flight-record-map {
    .marker-item {
      background: #409eff;
      animation: radiat 2s ease-in-out infinite;
      -webkit-animation: radiat 2s ease-in-out infinite;
    }
  }
}
</style>
<style>
@keyframes radiat {
  0% {
    transform: scale(0.4);
    opacity: 0.4;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.4);
    opacity: 0.4;
  }
}
.record-detail-container .amap-toolbar,
.record-detail-container .amap-maptype-wrap,
.record-detail-container .amap-scalecontrol {
  visibility: hidden !important;
}
</style>